<!--
功能：选择图标
作者：Maoxiangdong
邮箱：862755519@qq.com
时间：2023-11-21 16:41:00
-->
<template>
  <a-popover v-model:open="visible" trigger="click" placement="bottomLeft">
    <a-input :value="value" readonly :style="{width: width}" placeholder="点击选择系统图标">
      <template #prefix v-if="value">
        <i class="iconfont" :class="value"></i>
      </template>
      <template #suffix>
        <i class="iconfont" :class="visible ? 'jichu05' : 'jichu06'"></i>
      </template>
    </a-input>
    <template #content>
      <div class="icon-card">
        <div class="icon-card-search">
          <a-input-search
            v-model:value="keyword"
            placeholder="输入图标名称进行搜索"
            enter-button
            style="width: 100%"
            @search="handleSearch"
          />
        </div>
        <div class="icon-card-content">
          <div class="icon-card-item" @click="handleSelectNone" :style="!value ? activeStyles : null">
            <span>无</span>
          </div>
          <div
            class="icon-card-item"
            v-for="(item, index) in iconList"
            :key="index"
            @click="handleSelectIcon(item)"
            :style="value == item.font_class ? activeStyles : null"
          >
            <i class="iconfont" :class="item.font_class" style="font-size: 20px"></i>
          </div>
        </div>
      </div>
    </template>
  </a-popover>
</template>

<script setup>
import iconData from '@/assets/iconfont/iconfont.json'
import { ref, onMounted, computed } from 'vue'
import useSettingsStore from '@/store/modules/settings'
//仓库实例化
const settingsStore = useSettingsStore()
const props = defineProps({
  value: {
    type: String,
    default: ''
  },
  width: {
    type: String,
    default: '352px'
  }
})
// 侧边栏主题
const themeColor = computed(() => {
  return settingsStore.themeColor
})
// 图标容器样式
const activeStyles = computed(() => {
  return {
    backgroundColor: `${themeColor.value}18`,
    color: themeColor.value,
    borderColor: themeColor.value
  }
})
// 图标数据
const iconList = ref([])
// 搜索关键词
const keyword = ref(null)
// 显示
const visible = ref(false)
// 搜索
const handleSearch = () => {
  if (keyword.value) {
    const filteredArray = iconData.glyphs.filter((item) => item.font_class.includes(keyword.value))
    iconList.value = filteredArray
  } else {
    iconList.value = iconData.glyphs
  }
}
const emits = defineEmits(['update:value'])
// 选择图标
const handleSelectIcon = (event) => {
  emits('update:value', event.font_class)
}
// 选择无
const handleSelectNone = () => {
  emits('update:value', '')
}
// onMounted
onMounted(() => {
  iconList.value = iconData.glyphs
})
</script>
<style lang="scss" scoped>
.icon-card {
  width: 100%;
  height: auto;
  width: 350px;
  border: 1px solid #ffffff;
  border-radius: 8px;
  &-search {
    text-align: center;
    font-size: 15px;
    color: #17233d;
    border-bottom: 1px solid #e8eaec;
    padding: 10px;
  }
  &-content {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    height: auto;
    max-height: 400px;
    overflow-y: scroll;
    margin: 10px;
  }
  &-item {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e8eaec;
    background-color: #ffffff;
    border-radius: 4px;
    color: #515a6e;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.1s ease-in-out;
    &:hover {
      background-color: #f5f5f5;
    }
    &-active:hover {
      background-color: inherit;
    }
  }
}
.icon-card-content::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 0px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.icon-card-content::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(97, 184, 179, 0.1);
  background: #bebdbd;
}
.icon-card-content::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
  border-radius: 10px;
  background: #ededed;
}
</style>
